<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mygallery</title>

    <style>
        .imgBox{
				position: fixed;
				width: 100%;
				height: 100%;
				background-position: 50% 50%;
				background-size: initial;
				background-repeat: no-repeat;
				background-attachment: initial;
				background-origin: initial;
				background-clip: initial;
				background-color: rgba(0, 0, 0, 0.5);
				top: 0px;
				left: 0px;
				z-index: 1000;
			}
			.imgBox img{
				position:absolute;
				width:100%;
			}
			.closeBtn{
				position: absolute;
				right: 10px;
				top: 10px;
				width: 30px;
				height: 30px;
				border-radius: 15px;
				background-color: rgba(255, 255, 255, 0.5);
				color: rgba(0, 0, 0, 0.5);
				text-align: center;
				font-size: 30px;
				line-height: 30px;
			}
			.zoom{
				position: absolute;
				z-index: 1000;
				bottom: 10%;
				left: 50%;
				transform: translateX(-50%);
				width: 50%;
			}
			.zoomOut,.zoomIn{
				float: left;
				background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
				background-color: rgba(0,0,0,0.2);
				text-align: center;
				width: 50%;
				height: 1.5em;
				line-height: 1.5em;
				font-size: 18px;
				font-weight: bold;
				color: rgba(255,255,255,0.6);
				box-shadow: 0 2px 0 hsla(0,0%,100%,.05) inset, 1px 0px 2px hsla(0,0%,100%,.15) inset, 0 1px 0 hsla(0,0%,100%,.05);
			}
			.zoomOut{
				border-radius: 1em 0px 0px 1em;
			}
			.zoomIn{
				border-radius: 0px 1em 1em 0px;
			}
    </style>
</head>
<body>
    <img src="image.png" data-imgsrc="image.png" alt="">
</body>
<script src="jquery.min.js"></script>
<script src="gallery.js"></script>
<script>
	var  gallery = new gallery()
	gallery.init()
</script>
<!-- <script>
    	window.gallery = (function(){
			var setup = function(){
				this.clientX = 0
				this.clientY = 0
			}
			setup.prototype = {
				init : function(){
					var _self = this
					$('[data-imgsrc]').click(function(){
						$('body').css({'overflow':'hidden','height':$(window).height()+'px'})
						_self.createImgBox(this)
					})
				},
				createImgBox : function(em){
					var imgsrc = $(em).attr('data-imgsrc')
					var imgBox = $('<div class="imgBox"></div>')
					var _self = this
					//图像
					var img = $('<img>').attr('src',imgsrc).on({
						'touchstart':function(e){
							var m_x = e.originalEvent.targetTouches[0].clientX
							var m_y = e.originalEvent.targetTouches[0].clientY
							var img_x = $(this).offset().left
							var img_y = $(this).offset().top
							var pos_x = $(this).position().left
							var pos_y = $(this).position().top
							var offset_l = this.offsetLeft
							var offset_t = this.offsetTop
							console.log('鼠标位置',m_x,m_y)
							console.log('img相对位置',img_x,img_y)
							console.log('相对父元素位置',offset_l,offset_t)
							console.log('相对位置',pos_x,pos_y)
							_self.clientX = m_x-offset_l
							_self.clientY = m_y-offset_t
						},
						'touchmove':function(e){
							if(e.originalEvent.targetTouches.length==1){
								var m_x = e.originalEvent.targetTouches[0].clientX
								var m_y = e.originalEvent.targetTouches[0].clientY
								$(this).css({
									top:(m_y-_self.clientY)+'px',
									left:(m_x-_self.clientX)+'px',
								})
							}else if(e.originalEvent.targetTouches.length>=2){
								//待添加双指放大事件
							}

						}
					}).appendTo(imgBox)
					
					//关闭按钮
					var closeBtn = $('<div class="closeBtn"></div>').text('×').appendTo(imgBox).bind('click',function(){
						_self.delImgBox(this)
					})
					imgBox.appendTo('body')

					//放大缩小按钮
					var zoomBtn = $('<div class="zoom"></div>').appendTo(imgBox)

					var zoomOut = $('<div class="zoomOut">+</div>').on('click',function(){
						_self.zoomOut($('.imgBox img'))
					}).appendTo(zoomBtn)

					var zoomIn = $('<div class="zoomIn">-</div>').on('click',function(){
						_self.zoomIn($('.imgBox img'))
					}).appendTo(zoomBtn)
					
					//图像加载事件
					img
					.load(function(){
						$('.imgBox').css('backgroundImage','')
						$(this).css({
							left:0,
							top:$('.imgBox').height()/2-$(this).height()/2
						})
					})
					.error(function(){
						$('.imgBox').css('backgroundImage','').append('<div style="display:flex;justify-content:center;align-items:center;height:100%;color:red;">图片加载失败</div>')
						$(this).remove()
					})

				},
				delImgBox : function(em){
					$(em).unbind('click')
					$('.imgBox').remove()
					$('body').css({'overflow':'auto','height':'auto'})
				},
				zoomOut : function(em){
					var origin_width = em.width()
                    var origin_height = em.height()
                    var origin_left = Number(em.css('left').replace('px',''))
                    var origin_top = Number(em.css('top').replace('px',''))
                    var l = origin_left-origin_width*0.1/2
                    var t = origin_top-origin_height*0.1/2
					em.css({
						width : origin_width*1.1+'px',
                        height : origin_height*1.1+'px',
                        left : l+'px',
                        top : t+'px',
					})
				},
				zoomIn : function(em){
					var origin_width = em.width()
					var origin_height = em.height()
                    var origin_left = Number(em.css('left').replace('px',''))
                    var origin_top = Number(em.css('top').replace('px',''))
                    var l = origin_left+origin_width*0.1/2
                    var t = origin_top+origin_height*0.1/2
					em.css({
						width : origin_width*0.9+'px',
                        height : origin_height*0.9+'px',
                        left : l+'px',
                        top : t+'px',
					})
				}
			}
			return setup
		})()

		var g = new gallery()
		g.init()
</script> -->
</html>